<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom结构</title>

    <style>
        .box {
            width: 400px;
            height: 200px;
            border: 1px solid;
            border-radius: 8px;
        }

        .item {
            width: 80px;
            height: 80px;
            border: 1px solid;
            border-radius: 8px;
            text-align: center;
            line-height: 80px;
        }

        .left {
            float: left;
        }

        .danger {
            border: #FF0000 1px solid;
        }

    </style>
</head>
<body>

<div class="box" id="oddBox" ondragover="allowDrop(event)" ondrop="drop(event)">
奇数
</div>

<div class="box" id="evenBox" ondragover="allowDrop(event)" ondrop="drop(event)">
偶数
</div>
<div>
    <div id="item1" class="item left" draggable="true" ondragstart="drag(event)">
        1
    </div>
    <div id="item2" class="item left" draggable="true" ondragstart="drag(event)">2</div>
    <div id="item3" class="item left" draggable="true" ondragstart="drag(event)">3</div>
    <div id="item4" class="item left" draggable="true" ondragstart="drag(event)">4</div>
</div>

<div style="float:left;clear:both">
    <button id="btnChild">成为子元素</button>
    <button id="btnBefore">出现在前方</button>
</div>
</body>
<script>

    /****
     *  程序员的首要职责
     *          管理复杂度
     *     追新  稳定
     *   日本
     * */

    var box1 = document.getElementById('box1');
    var item1 = document.getElementById('item1');

    var btnChild = document.getElementById('btnChild');
    var btnBefore = document.getElementById('btnBefore');


    btnChild.onclick = function () {
        box1.appendChild(item1);
    }


    btnBefore.onclick = function () {
        /****
         * 在父容器中，做dom操作
         * */
        document.getElementsByTagName('body')[0].insertBefore(item1, box1)
    }


    function drag(ev) {
        /*  console.log(ev.target);
          alert(ev.target.id);*/
        ev.dataTransfer.setData("sourceId", ev.target.id);
        ev.dataTransfer.setData("number", ev.target.innerText);
    }

    function allowDrop(ev) {
        ev.preventDefault();
    }


    function drop(ev) {
        ev.preventDefault();
        var num = ev.dataTransfer.getData("number");
        var soureId = ev.dataTransfer.getData("sourceId");
        var item = document.getElementById(soureId);
        if (ev.target.id == "evenBox") {
            if (!isEven(num)) {
                item.classList.add("danger");
            }else {
                item.classList.remove("danger");
            }
        }
        if (ev.target.id == "oddBox") {
            if (isEven(num)) {
                item.classList.add("danger");
            }else {
                item.classList.remove("danger");
            }
        }
        ev.target.appendChild(item);
    }

    /**判断是不是偶数*/
    function isEven(num) {
        return num % 2 == 0;
    }

</script>
</html>